﻿function ViewImages(){
    var obj=new Object;
    var imgCount=0;
    var width=0;
    var height=0;
    var scalingWidth=0;
    var scalingHeight=0;
    var scaling=true;
    var containerLeft=0;
    obj.setImgCount=function(val){
        imgCount=val;
    }
    obj.getImgCount=function(){
        return imgCount;
    }
    obj.setImageScalingWidth=function(val){
        scalingWidth=val;
    }
    obj.setImageScalingHeight=function(val){
        scalingHeight=val;
    }
    obj.setImageScaling=function(val){
        scaling=val;
    }
    obj.getImageWidth=function(){
        return parseInt(width);
    }    
    obj.getImageHeight=function(){
        return parseInt(height);
    }
    obj.setScaling=function(img){
        if (scaling){
            if (img.width>0&&img.height>0){
                if(img.width>=scalingWidth&&img.height>=scalingHeight){
                    if (img.width/img.height>=scalingWidth/scalingHeight){
                        width=scalingWidth;
                        height=((img.height*scalingWidth)/img.width);
                    }else{
                        width=((img.width*scalingHeight)/img.height);
                        height=scalingHeight;
                    }
                }else if(img.width>=scalingWidth&&img.height<scalingHeight){
                    width=scalingWidth;
                    height=((img.height*scalingWidth)/img.width);
                }else if(img.width<scalingWidth&&img.height>=scalingHeight){
                    width=((img.width*scalingHeight)/img.height);
                    height=scalingHeight;
                }else{
                    width=img.width;
                    height=img.height;
                }
            }
        }else{
            width=scalingWidth;
            height=scalingHeight;
        }
    }
    obj.setContainerLeft=function(val){
        containerLeft=val;
    }
    obj.getContainerLeft=function(){
        return containerLeft;
    }
    return obj;
}
(function($){
    $.fn.ImageView=function(options){
        options=$.extend({
            scaling:true,
            showLastTip:true,
            scalingWidth:600,
            scalingHeight:450,
            imageJson:[],
            activeImage:0,
            imageOpacity:.5,
            lastTipJson:{"TipTitle":"已经浏览到最后一张，您可以","TipReset":"重新浏览","TipMore":"查看更多外景图","MoreURL":"#"},
            navgationJson:{"AUp":"向前","ADown":"向后","AScrollbar":"拖动工具条以快速查看图片"},
            sourceContainer:$("#divImageView"),
            viewImages:ViewImages
        },options);
        function init(){
            setHtml();
            setWidthHeight();
            options.viewImages.setImageScalingWidth(options.scalingWidth);
            options.viewImages.setImageScalingHeight(options.scalingHeight);
            options.viewImages.setImageScaling(options.scaling);
            var plusLeft=parseInt((options.scalingWidth-40-parseInt((options.scalingWidth-40)/70)*70)/2);
            options.viewImages.setContainerLeft(plusLeft+options.sourceContainer.position().left+parseInt(options.sourceContainer.css("border-left-width"))+parseInt(options.sourceContainer.find(".divNavgation").css("margin-left")));
            showloading(true);
            addEvent();
            setNavgation();
            preImage(options.imageJson);            
        }
        function setHtml(){
            var html='<div class="divLoading">';
            html+='    <img class="imgLoading" src="../images/loading.gif" />';
            html+='</div>';
            html+='<div class="divBimg">';
            html+='    <span><img class="imgBimg"/></span>';
            html+='</div>';
            html+='<div class="divNavgation">';
            html+='    <div class="divImageTitle">';
            html+='    </div>';
            html+='    <div class="divImageContainer">';
            html+='        <a class="aUp"></a>';
            html+='        <div class="divImageList">';
            html+='        </div>';
            html+='        <a class="aDown"></a>';
            html+='    </div>';
            html+='</div>';
            options.sourceContainer.html(html);
        }
        function setWidthHeight(){
            options.sourceContainer.find(".divLoading").andSelf().css({width:options.scalingWidth,height:options.scalingHeight+100});
            options.sourceContainer.find(".divLoading img").css({margin:parseInt((options.scalingHeight+100-30)/2)+"px "+parseInt((options.scalingWidth-30)/2)+"px"});
            options.sourceContainer.find(".divBimg,.divBimg span").css({width:options.scalingWidth,height:options.scalingHeight});
            if($.browser.msie){
                options.sourceContainer.find(".divBimg span").css({"font-size":parseInt(options.scalingHeight/1.145)+"px"});
            }
            options.sourceContainer.find(".divNavgation").css({width:options.scalingWidth});
            options.sourceContainer.find(".divImageContainer").css({width:options.scalingWidth-2});
            options.sourceContainer.find(".divImageTitle").css({width:options.scalingWidth-10,"opacity":".7"});
        }
        function setNavgation(){
            options.sourceContainer.find(".aUp").attr({"title":options.navgationJson["AUp"]}).bind("click",function(){
                options.activeImage--;
                showInfo(options.activeImage);
            });
            options.sourceContainer.find(".aDown").attr({"title":options.navgationJson["ADown"]}).bind("click",function(){
                options.activeImage++;
                showInfo(options.activeImage);
            });
        }
        function addEvent(){
            options.sourceContainer.find(".divBimg").bind("mousemove",function(e){
                if(e.pageX<=$(this).offset().left+($(this).width()/2)){
                    $(this).css("cursor","url('../images/arr_left.cur'),auto");
                }else{
                    $(this).css("cursor","url('../images/arr_right.cur'),auto");
                }
            }).bind("click",function(e){if(e.pageX<=$(this).offset().left+($(this).width()/2)){options.activeImage--;showInfo(options.activeImage);}else{options.activeImage++;showInfo(options.activeImage);}});
            options.sourceContainer.find(".divImageList img").live("click",function(){
                showInfo(options.sourceContainer.find(".divImageList img").index($(this)));
            });
            $(document).unbind("keydown").bind("keydown",function(e){
                key=e.keyCode;
                if(key==37){
                    options.activeImage--;
                    showInfo(options.activeImage);
                }
                if(key==39){
                    options.activeImage++;
                    showInfo(options.activeImage);
                }
            });
            $(window).bind("resize",function(){
                var plusLeft=parseInt((options.scalingWidth-40-parseInt((options.scalingWidth-40)/70)*70)/2);
                options.viewImages.setContainerLeft(plusLeft+options.sourceContainer.position().left+parseInt(options.sourceContainer.css("border-left-width"))+parseInt(options.sourceContainer.find(".divNavgation").css("margin-left")));
                showInfo(options.activeImage);
            });
        }
        function getCenterPosition(type,val){
            if(type=="left"){return parseInt(options.sourceContainer.position().left+options.sourceContainer.outerWidth()/2-val)}
            if(type=="top"){return parseInt(options.sourceContainer.position().top+(options.sourceContainer.outerHeight()-100)/2-val)}
        } 
        function showLastTip(){
            if(options.showLastTip){
                if(options.lastTipJson!=null){
                    if(options.sourceContainer.find(".divLastTip").length==0){
                        var lastTip='<div class="divLastTip" style="left:'+getCenterPosition("left",120)+'px;top:'+getCenterPosition("top",30)+'px;"><table><tr><td><center>'+options.lastTipJson["TipTitle"]+'</center></td></tr><tr><td class="center"><center><div class="nav"><a class="aTipReset">'+options.lastTipJson["TipReset"]+'</a></div></center></td></tr></table></div>';
                        options.sourceContainer.append(lastTip);
                        options.sourceContainer.find(".divLastTip .aTipReset").bind("click",function(){
                            options.activeImage=0;
                            showInfo(options.activeImage);
                        });
                        options.sourceContainer.find(".divLastTip").css({"opacity":.6}).show();
                    }else{
                        options.sourceContainer.find(".divLastTip").css({"opacity":.6}).show();
                    }
                }
            }
        }
        function preImage(imgJson){
            options.viewImages.setImgCount(0);
            for(var i in imgJson){
                var img=new Image();
                $(img).attr("src",imgJson[i]["src"]);
                options.sourceContainer.find(".divImageList").append('<div style="cursor:pointer;position:absolute;width:64px;height:48px;padding:0px;margin:12px 2px;"><img style="padding:0px;margin:0px;width:64px;height:48px;" src="'+imgJson[i]["src"]+'"/></div>');
                if(img.complete){                    
                    options.viewImages.setImgCount(parseInt(i)+1);
                }else{
                    $(img).bind("load",function(){
                        options.viewImages.setImgCount(parseInt(i)+1);
                        $(img).unbind();
                    })
                }
            }
            checkImgCount();
        }
        function checkImgCount(){
            if(options.viewImages.getImgCount()==options.imageJson.length){
                showInfo(options.activeImage);
            }else{
                setTimeout(checkImgCount,1000);
            }
        }
        function setImagePostion(index){
            options.sourceContainer.find(".divImageList img").parent().hide();
            var imgCount=options.viewImages.getImgCount();
            var showCount=parseInt((options.scalingWidth-40)/70);
            var halfCount=parseInt(showCount/2);
            halfCount=((showCount%2==0)?halfCount:halfCount+1);
            if(imgCount>showCount){
                if((imgCount-index)<=halfCount){
                    var j=0;
                    for(var i=imgCount-showCount;i<imgCount;i++){
                        options.sourceContainer.find(".divImageList img").eq(i).parent().css({left:parseInt(40+options.viewImages.getContainerLeft()+j*70)}).show();
                        j++;
                    }
                }else{
                    if(index<halfCount){
                        for(var i=0;i<showCount;i++){
                            options.sourceContainer.find(".divImageList img").eq(i).parent().css({left:parseInt(40+options.viewImages.getContainerLeft()+i*70)}).show();
                        }
                    }else{
                        var j=0;
                        for(var i=index-(halfCount-1);i<index+(showCount-(halfCount-1));i++){
                            options.sourceContainer.find(".divImageList img").eq(i).parent().css({left:parseInt(40+options.viewImages.getContainerLeft()+j*70)}).show();
                            j++;
                        }
                    }
                }
            }else{
                for(var i=0;i<imgCount;i++){
                    options.sourceContainer.find(".divImageList img").eq(i).parent().css({left:parseInt(40+options.viewImages.getContainerLeft()+i*70)}).show();
                }
            }
        }
        function showloading(show){
            if(show){
                options.sourceContainer.css({background:"#000000"});
                options.sourceContainer.find(".divNavgation").hide();
                options.sourceContainer.find(".divLoading").show();
            }else{
                options.sourceContainer.css({background:"#ffffff"});
                options.sourceContainer.find(".divLoading").hide();
                options.sourceContainer.find(".divNavgation").show();
            }
        }
        function showInfo(index){
            if(index>=options.viewImages.getImgCount()){
                showLastTip();
                options.activeImage--;
            }else if(index>=0){
                options.activeImage=index;
                setScaling(index);
                showTitle(index);
                setImagePostion(index);
                options.sourceContainer.find(".divImageList img").css({"opacity":options.imageOpacity,"filter":"alpha(opacity="+(options.imageOpacity*100)+");"});
                options.sourceContainer.find(".divImageList img").eq(index).css({"opacity":"1","filter":"alpha(opacity=100);"});
            }
            showloading(false);
        }
        function showTitle(index){
            options.sourceContainer.find(".divImageTitle").text(options.imageJson[index]["title"]+"("+(index+1)+"/"+options.viewImages.getImgCount()+")");
        }
        function setScaling(index){
            showloading(true);
            var img= new Image();
            $(img).attr({"src":options.imageJson[index]["bimg"]});
            if(img.complete){
                options.viewImages.setScaling(img);
                showBimg(index);
                showloading(false);
            }else{
                $(img).bind("load",function(){
                    options.viewImages.setScaling(img);
                    showBimg(index);
                    showloading(false);
                    $(img).unbind();
                })
            }            
        }
        function showBimg(index){
            options.sourceContainer.find(".divLastTip").hide();
            options.sourceContainer.find(".imgBimg").attr({src:options.imageJson[index]["bimg"],title:options.imageJson[index]["title"],alt:options.imageJson[index]["alt"]}).css({width:options.viewImages.getImageWidth(),height:options.viewImages.getImageHeight()}).show();
        }
        return this.each(function(){
            init();
        });
    };
})(jQuery);